<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>团购券详情页</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/groupCouponDeatail.css">
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
    <!-- 获取url的值 -->
    <script src="js/getUrlVal.js"></script>
    <script src="js/reset.js"></script>
    <script src="js/js/jquery-3.1.0.min.js"></script>
</head>

<body>
    <div id="container">
        <img class="banner" :src="data.imgurl" alt="">

        <section class="one">
            <div class="line">
                <div class="title">
                    {{data.couponname}}
                </div>
                <div class="surplus">剩余: {{data.rest}}张</div>
            </div>
            <div class="price"> 0.00 <span>元/张</span> </div>
            <div class="endTime">
                活动时间截至：
                <!-- {{data.starttime}} -->
                {{data.endtime}}
            </div>
            <div class="tip">
                <div>
                    <img src="./img/icon2.png" alt="">
                    未消费可退款
                </div>
                <div>
                    <img src="./img/icon2.png" alt="">
                    过期退
                </div>
            </div>
        </section>

        <section class="two">
            <div class="business">
                <div><img src="./img/icon.png" alt=""> {{data.sellername}}</div>
                <div>
                    <a :href="'tel:' + data.phone"><img src="./img/icon_phone.png" alt="">联系商家</a>
                </div>
            </div>
            <div>
                <img src="./img/icon_address.png" alt=""> {{data.address}}
            </div>
        </section>

        <section class="three">
            <div class="title"> 购买须知</div>
            <div class="notice"  v-for="item in noticeList">
                {{item}}
            </div>
        </section>
    </div>
</body>

<script>
    new Vue({
        el: '#container',
        data() {
            return {
                data: {}
            }
        },
        created() {
            axios({
                url: 'http://192.168.1.66:8888/home/getgroupcoupondetail',
                method: 'POST',
                headers: {
                    'organizationid': 40,
                },
                params: {
                    'couponid': 100000595,
                    // 'latitude': 121212,
                    // 'longitude': 121212,
                }
            }).then(res => {
                this.data = JSON.parse(res.data.data);
            })
        },
        computed: {
            noticeList: function () {
                return this.data.notice.split('\n');
            }
        },
        methods: {

        },

    })
</script>

</html>